<template>
    <div id="warp">
<<<<<<< HEAD
=======
        {{id}}
>>>>>>> d9b4a2718ea62e9e59cfea0adff3ca11e7f0e50f
        <!--实现评论组件1.0 实现静态页面结构-->
            <div class="content">
            <h4>提交评论</h4>
             <hr>
            <textarea placeholder="请输入您要评论的内容..." v-model="content"></textarea>
                <!--实现评论组件3.0 发表按钮中注册提交数据事件1-->
<<<<<<< HEAD
             <mt-button type="primary" size="large" @click="postcomment" >发表</mt-button>

            </div>

        <!--回复列表-->
            <div id="list">
                <h4>评论列表</h4>
                <hr>
                <div v-for="(item,index) in list">
                    <div class="title" >
                       <span>第{{index +1}}楼：&nbsp;用户：{{item.user_name}}&nbsp;&nbsp; 发表时间：{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
                    </div>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell" v-text="item.content"></li>
                    </ul>
                </div>
                <mt-button type="primary" size="large" @click="getmore">加载更多</mt-button>
            </div>


=======
             <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>

            </div>
>>>>>>> d9b4a2718ea62e9e59cfea0adff3ca11e7f0e50f
    </div>
</template>

<script>
    import common from '../../kits/common.js';
    import { Toast } from 'mint-ui';
    export default {
        props:['id'] , //作用是：用来接收父组件传过来的id值
        data(){
            return {
                content:'',
<<<<<<< HEAD
                user_name:'匿名用户',
                list:[],
                page:1
            }
        },
        created(){
            this.getlist(this.page);
        },
=======
                user_name:'匿名用户'
            }
        },
>>>>>>> d9b4a2718ea62e9e59cfea0adff3ca11e7f0e50f
        methods:{
            // 实现评论组件3.0 发表按钮中注册提交数据事件
            postcomment(){

                //判断用户是否有提交填写内容；
                if(this.content.trim() == ''){
                    Toast({
                        message: '填写内容不得为空',
                        // iconClass: 'mintui-success'
                    });
                    return false;
                }

                //将数据提交到服务器
                var url = common.apiurl + '/api/comment.php'
                this.$http.post(url,{content:this.content,user_name:this.user_name,module_id:this.id},{emulateJSON:true}).then(function(res){
                    Toast(res.body.message);
                    //将文本框清空
                    this.content = ''
                })
<<<<<<< HEAD
                this.getlist1(this.page)
            },

            //获取评论数据
            getlist(page){
                var page = page || 1
                var url = common.apiurl + '/api/reply.php?module_id='+ this.id + '&page=' + page
                this.$http.get(url).then(function(res){
                    if(res.body.status != 0){
                        Toast(res.body.message);
                        return; 
                    }
                    if(res.body.message == ''){
                        Toast('暂时有没更多数据');
                        return;
                    }
                    this.list = this.list.concat(res.body.message)
                })
            },
            //添加完数据重新加载数据
            getlist1(page){
                var page = page || 1
                var url = common.apiurl + '/api/reply.php?module_id='+ this.id + '&page=' + page
                this.$http.get(url).then(function(res){
                    if(res.body.status != 0){
                        Toast(res.body.message);
                        return;
                    }
                    this.list = []
                    this.list = res.body.message
                })
            },

            //加载更多按钮
            getmore(){
                this.page++
                this.getlist(this.page)
=======
>>>>>>> d9b4a2718ea62e9e59cfea0adff3ca11e7f0e50f
            }
        }
    }
</script>

<style scoped>
    /*实现评论组件2.0 实现静态页面结构CSS样式*/
    #warp{
        margin:10px 12px
    }
<<<<<<< HEAD
     h4{
        padding:3px 0;
    }
     hr{
        border-color:rgba(0,0,0,0.1);
    }
    .content{
        margin-bottom: 1.5rem;
    }

    /*2.0 回复列表的样式*/
    .title{
        color: #6d6d72;
        font-size: 15px;
        background-color: rgba(0,0,0,0.1);
        padding: 5px;
    }
    .title span{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        width: 100%;
        vertical-align: middle;
    }
=======
    .content h4{
        padding:3px 0;
    }
    .content hr{
        border-color:rgba(0,0,0,0.1);
    }
    .content textarea{

    }

>>>>>>> d9b4a2718ea62e9e59cfea0adff3ca11e7f0e50f
</style>